<template>
  <div style="text-align: center">
    <Button @click="modal = true">点击</Button>
    <Modal v-model="modal" width="360">
      <p slot="header">
        <span>新增费用归属</span>
      </p>
      <p>目录名称</p>
      <p class="md-ipt">
        <input type="text" placeholder="请输入，必填，最多20个汉字" />
      </p>
      <p style="margin-top: 20px">目录记录</p>
      <p class="md-ipt">
        <input type="text" placeholder="请输入，必填，最多20个汉字" />
      </p>
    </Modal>
      <!--简单输入框-->
    <div>
      <p style="line-height: 2.2;margin-top: 20px">
        费用归属: {{ value }}
      </p>
      <p>
        <Button @click="handleRender">新增费用归属</Button>
      </p>
    </div>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        modal: false,
        value: ''
      }
    },
    methods: {
      handleRender () {
        this.$Modal.confirm({
          render: (h) => {
            return h('Input', {
              props: {
                value: this.value,
                autofocus: true,
                placeholder: '请输入，必填，最多20个汉字'
              },
              on: {
                input: (val) => {
                  this.value = val;
                }
              }
            })
          }
        })
      }
    }
  }
</script>
<style scoped>
  .md-ipt input{
    width: 100%;
    margin-top: 10px;
    text-indent: 8px;
    background-color: #f4f4f4;
    border-radius: 4px;
    line-height: 3;
  }
  .ivu-btn-primary {
    color: #fff;
    background-color: #0078C9!important;
    border-color: #0078C9!important;
  }
</style>
